import React from "react";
import Button from "antd/lib/button";
import Upload from "antd/lib/upload";
import UploadOutlinedIcon from "@ant-design/icons/UploadOutlined";
import message from 'antd/lib/message';

export default function FileButton({ doneEventHandler, position }) {
  const uploadProps = {
    name: 'file',
    showUploadList: false,
    accept: '.png,.jpg,.gif,.titf',
    action: 'api/image/upload',
    maxCount:1,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        window.console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        doneEventHandler("url(\"/static/files/" + info.file.response + "\") no-repeat " + (position || ""));
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 图片文件上传失败！`);
      }
    },
  };  

  return (
    <Upload {...uploadProps}>
      <Button>
        <UploadOutlinedIcon /> 上传图片
      </Button>
    </Upload>
  );
}
